import { defineComponent, ref, reactive, onMounted, PropType, computed } from 'vue'

export const IntervalNumber = defineComponent({
  name: 'IntervalNumber',
  setup() {
    return () => <div>
      这是一个测试组件/自动发布测试/自动发布测试2
    </div>
  },
})

export default defineComponent({
  name: 'app',
  props: {
    msg: {
      type: String as PropType<string>,
    },
  },
  setup(props, ctx) {
    const count = ref<number>(0)
    const config = reactive({
      name: 'name',
      age: 22,
    })

    // console.log(config)
    const age = computed(() => config.age)

    onMounted(() => {
      setInterval(() => {
        count.value += 1
        config.age += 1
        count.value += 1
      }, 1000)
    })

    return () => {
      // console.log('refresh', age)
      return <div>
        Hello World {count.value}
        {
          count.value % 2 === 0 ? <IntervalNumber /> : null
        }
        <div class={'test'} style={{ background: 'red' }}>
          <IntervalNumber v-show={count.value % 2 === 1}/>
        </div>
        <div>
          <p> Name:{config.name}</p>
          <p> Age:{config.age} -- {age.value}</p>
        </div>
      </div>
    }
  },
})

